<!DOCTYPE html>
<html lang="en" class="no-js">

<head>

    <meta charset="utf-8">
    <title>Fullscreen Login</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- CSS -->
    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=PT+Sans:400,700'>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/supersized.css">
    <link rel="stylesheet" href="css/style.css">
    <style>
        #cellphone_error {
            color: red;
        }
        #check_length{
            color: red;
        }
    </style>
</head>

<body>

<div class="page-container">
    <h1>注册</h1>
    <!--user?opr=register-->
    <form action="user?opr=register" method="post">
        <input type="text" id="username" name="telephone" class="username" placeholder="账号"><span
            id="cellphone_error"></span>
        <input type="password" id="password" name="password" class="password" placeholder="密码"><span
            id="check_length"></span>
        <input type="text" name="code" class="code" placeholder="验证码">
        <button id="cinputNum" type="submit">注册</button>
        <div class="error"><span>+</span></div>
    </form>
    <div class="connect">

    </div>
</div>
<div align="center">已有账号？去<a href="login.html">登录</a></div>

<!-- Javascript -->
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/supersized.3.2.7.min.js"></script>
<script src="js/supersized-init.js"></script>
<script src="js/scripts.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#username").blur(function () {
            const phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;
            //电话
            const phone = $.trim($('#username').val());
            if (!phoneReg.test(phone)) {
                $("#cellphone_error").html("手机号不正确")
                return false;
            }
            if (phoneReg.test(phone)) {
                $("#cellphone_error").html("手机号正确")
                return true;
            }
        })
        $("#password").blur(function () {
            const pwd = $.trim($('#password').val());
            if (pwd.length<=6){
                $("#check_length").html("密码长度过短！不能少于6位")
                return false
            }
            if(pwd.length>=6){
                $("#check_length").html("通过！")
                return true;
            }
        })

    })
</script>
</body>

</html>

